<template>
  <el-menu :default-active="activeIndex"
           class="el-menu-demo"
           mode="horizontal"
           @select="handleSelect"
           background-color="rgb(220,25,29)"
           text-color="#fff"
           active-text-color="yellow"
           router>
    <el-menu-item index="hszl" >
      红色之旅
    </el-menu-item>
    <el-menu-item index="zwyw">
      政务要闻
    </el-menu-item>
    <el-menu-item index="wzly">
      网站留言
    </el-menu-item>
    <el-menu-item index="login" style="float: right">
      退出登录
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: 'hszl'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.el-menu {
  background-color: rgb(220,25,29);
  padding: 0 10% 0 10%;
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 2px solid yellow;
}
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal>.el-submenu:hover,
.el-submenu__title:hover {
  background-color: #CC0033 !important;
}
</style>